<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增公式信息')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-select-css" />
    <th:block th:include="include :: bootstrap-duallistbox-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-formula-add">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>基础信息</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">名称：</label>
                                <div class="col-sm-8">
                                    <input id="name" name="name" class="form-control" type="text" required>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">备注：</label>
                                <div class="col-sm-8">
                                    <textarea id="remark" name="remark" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>公式项配置<span style="color:red;font-weight:bold;">（请按公式运算先后顺序进行配置）</span></h5>
                        </div>
                        <div class="ibox-content" id="set-item">
                            <div class="form-group">
                                <div class="btn-group-sm" role="group">
                                    <div class="col-sm-1">
                                        <a class="btn btn-success" onclick="showEle(this)" >
                                            <i class="fa fa-plus"></i>
                                        </a>
                                    </div>
                                    <div class="col-sm-1" style="width:70px;margin-left: -52px;">
                                        <select name="operator" disabled class="form-control" >
                                            <option value=""></option>
                                        </select>
                                    </div>
                                    <div class="col-sm-1" style="margin-left: -18px;width:88px;">
                                        <select  name="type"  class="form-control"  required>
                                            <option value="1">数值</option>
                                            <option value="2">比例</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2" style="margin-left: -29px">
                                        <input style="width:226px;" name="name" class="form-control" type="text" required placeholder="请输入公式项名称">
                                    </div>
                                    <div class="col-sm-2" style="margin-left: 25px">
                                        <input style="width:226px;" name="tipsInfo" class="form-control" type="text" required placeholder="请输入公式项提示信息">
                                    </div>
                                    <div class="col-sm-1" style="width:206px;margin-left: 36px">
                                        是否必填：
                                       <label class="radio-box" th:each="dict : ${@dict.getType('sys_yes_no')}"> <input type="radio" name="requiredStatus" th:value="${dict.dictValue}" th:checked="Y"/> [[${dict.dictLabel}]] </label>
                                    </div>
                                    <div class="col-sm-4" style="margin-left: -26px">
                                        <select  class="form-control  noselect2 selectpicker" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('formula_properties')}">
                                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group dy" style="display:none;" th:each="item : ${formulaCountList}">
                                <div class="btn-group-sm" role="group">
                                    <div class="col-sm-1">
                                        <a class="btn btn-danger multiple" onclick="hideEle(this)">
                                            <i class="fa fa-remove"></i>
                                        </a>
                                    </div>
                                    <div class="col-sm-1" style="width:70px;margin-left: -52px;">
                                        <select  name="operator"  class="form-control"  required>
                                            <option value="+">+</option>
                                            <option value="-">-</option>
                                            <option value="*">*</option>
                                            <option value="/">/</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-1" style="margin-left: -18px;width:88px;">
                                            <select  name="option"  class="form-control"  required>
                                                <option value="1">数值</option>
                                                <option value="2">比例</option>
                                            </select>
                                    </div>
                                    <div class="col-sm-2" style="margin-left: -29px">
                                            <input style="width:226px;" name="name" class="form-control" type="text" required placeholder="请输入公式项名称">
                                    </div>
                                    <div class="col-sm-2" style="margin-left: 25px">
                                        <input style="width:226px;" name="tipsInfo" class="form-control" type="text" required placeholder="请输入公式项提示信息">
                                    </div>
                                    <div class="col-sm-1" style="width:206px;margin-left: 36px">
                                        是否必填：
                                        <div class="radio-box" th:each="dict : ${@dict.getType('sys_yes_no')}">
                                            <input type="radio" th:id="${dict.dictCode}" th:name="requiredStatus+${item}" th:value="${dict.dictValue}" th:checked="Y" required>
                                            <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"  ></label>
                                        </div>
                                    </div>
                                    <div class="col-sm-4" style="margin-left: -26px">
                                        <select class="form-control noselect2 selectpicker" data-none-selected-text="请选择" multiple th:with="type=${@dict.getType('formula_properties')}">
                                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>


                        </div>
                </div>
            </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: bootstrap-select-js" />
    <th:block th:include="include :: bootstrap-duallistbox-js" />
    <script th:inline="javascript">
        var prefix = ctx + "price/formula"
        $("#form-formula-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var widgets = [];
                $("#set-item .form-group").each(function(index){
                    var operator = "";
                    if(index > 0){
                        operator = $(this).find("select[name='operator'] option:selected").val();
                    }
                    var widgetType = $(this).find("select").eq(1).val();
                    // 获取控件名称方式调整
                    var widgetName = $(this).find("input[name='name']").val();
                    //  获取公式项提示信息
                    var tipsInfo = $(this).find("input[name='tipsInfo']").val();
                    // 获取是否必填
                    var requiredStatus = $(this).find("input[type='radio']:checked").val();
                    var attrSelect = $(this).find("select").eq(2);
                    var widgetAtrrValues = attrSelect.val();
                    var formulaWidgetAttrList = [];
                    for(var i = 0;i < widgetAtrrValues.length;i++){
                        var widgetAttrName = attrSelect.find("option:selected")[i].textContent
                        var formulaWidgetAttr = {
                            "attrName": widgetAttrName,
                            "attrValue": widgetAtrrValues[i]
                        }
                        formulaWidgetAttrList.push(formulaWidgetAttr);
                    }
                    if(widgetName) {
                        var widget = {
                            "operator": operator,
                            "name": widgetName,
                            "type": widgetType,
                            "tipsInfo": tipsInfo,
                            "requiredStatus": requiredStatus,
                            "formulaWidgetAttrList": formulaWidgetAttrList
                        };
                        widgets.push(widget);
                    }
                });
                var data = {
                    "name": $("#name").val(),
                    "remark": $("#remark").val(),
                    "formulaWidgetList": widgets
                };
                $.operate.saveJson(prefix + "/add", JSON.stringify(data));
            }
        }

        function showEle(tis){
            $(tis).parent().parent().parent().parent().find(".dy:hidden:first").show();
        }

        function hideEle(tis){
            $(tis).parent().nextAll().eq(0).find("select").val("+").select2();
            $(tis).parent().nextAll().eq(1).find("select").val("1").select2();
            $(tis).parent().nextAll().eq(2).find("input").val("");
            $(tis).parent().nextAll().eq(3).find("input").val("");
            $(tis).parent().nextAll().eq(4).find("input").val("Y");
            $(tis).parent().nextAll().eq(5).find("select").selectpicker('val','');
            $(tis).parent().parent().parent().hide();
        }
    </script>
</body>
</html>